<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    li {
        width: 734px;
        height: 548px;
        background-color: rgba(0, 0, 0, 0.2);
        border: 1px solid gray;

    }
</style>

<body>
    <!-- 
        IntersectionObserver 交叉观察对象，提供异步观察目标元素与祖先元素或者是HTML元素文档视口
        (祖先元素和窗口被称为root根)，由于这个API接口是异步观察，不会随着目标元素的滚动而同步触发

        实例对象
        callback 回调函数(当元素位置发生变化的时候会触发)
        option 配置对象(可选)，可以配置root根、rootMargin 编写触发的距离
     -->

    <ul>
        <!-- <li><img src="" alt="1" data-src="./lazyImg/01.jpeg" class="lazy"></li>
        <li><img src="" alt="2" data-src="./lazyImg/02.jpeg" class="lazy"></li>
        <li><img src="" alt="3" data-src="./lazyImg/03.jpeg" class="lazy"></li>
        <li><img src="" alt="4" data-src="./lazyImg/04.jpeg" class="lazy"></li>
        <li><img src="" alt="5" data-src="./lazyImg/05.jpeg" class="lazy"></li> -->
    </ul>

    <script src="./ajax.js"></script>
    <script>
        let imgs = document.querySelectorAll(".lazy");
        let ul=document.querySelector("ul")
        let index=1;
        loadImg(".lazy")
        function loadImg(tag){
                let img=document.querySelectorAll(tag);
                if(!img.length) return;

                img.forEach(function(el){
                    if(document.documentElement.clientHeight+document.documentElement.scrollTop >=el.offsetTop){
                        el.classList.remove('lazy');
                        el.src=el.dataset.src;
                        console.log("到达",el);
                    }
                })
            }
        Ajax("GET","http://studentback.dfbuff.top/getMethod",{"type":"图片"})
        .then(function(res){
            console.log(res.result);
            res.result.forEach(function(item,index){
                console.log(item.content);
                ul.innerHTML+=`<li><img src="" alt="1" data-src="${item.content}" class="lazy"></li>`
            });

            

        }).catch(function(err){
            console.log(err);
        })


        // // 实例化交叉观察函数
        // let io = new IntersectionObserver(function (entries) {
        //     console.log(entries);
        //     // 遍历数组
        //     entries.forEach(function(item){
        //         // 插卡当前元素是否可见
        //         if(item.isIntersecting){
        //             // 图片需要显示出来，src需要被赋值
        //             // console.log(item.target);
        //             item.target.src=item.target.dataset.src;
        //             // 停止对该目标元素的观察(加载完毕之后就不需要再次观察)
        //             io.unobserve(item.target);
        //         }
        //     })
        // },{
        //     // root 为null rootMargin不生效
        //     root:document.querySelector("ul"),
        //     // 当前距离底部或顶部元素到达200px的时候，加载下一张图片
        //     rootMargin:"200px 0px"
        // })

        // // 观察每一个图片
        // imgs.forEach(function (el) {
        //     // observe 方法用于开启监听
        //     io.observe(el);
        // })
        document.addEventListener("scroll",function(){
            loadImg(".lazy")
        })

    </script>
</body>

</html>